<template>
  <div class="main index-style">
      <component v-bind:is="currentTabComponent"></component>
      <div class="footimg">
        <img src="@/assets/img/imagesfund/bg_fund.png" alt="" srcset="">
      </div>
      <!--阅读协议提醒-->
      <el-dialog title="补签协议" :visible="showProtocol" width="30%" center :before-close='closeDialog' :close-on-click-modal="false">
        <p style="text-align:justify;line-height:1.8;"><span style="color:#000">【审慎阅读】</span>您在申请注册流程中点击同意本协议之前，应当认真阅读本协议。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、法律适用和争议解决条款。免除或者限制责任的条款将以粗体下划线标识，您应重点阅读。如您对协议有任何疑问，可向钜信网平台客服咨询。</p>
        <p style="text-align:justify;line-height:1.8;"><span style="color:#000">【签约动作】</span>当您按照注册页面提示填写信息、阅读并同意本协议且完成全部注册程序后，即表示您已充分阅读、理解并接受本协议的全部内容，并与平台达成一致，成为钜信平台“用户”。阅读本协议的过程中，如果您不同意本协议或其中任何条款约定，您应立即停止注册程序；弹出内容不影响原有勾选注册协议流程</p>
        <p><a :href="this.$store.state.user.protocolUrl" target="_blank" style="color:#3F99F7;">钜信网服务协议</a></p>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="agree" v-loading.fullscreen.lock="agreeLoading">同意</el-button>
          <el-button type="danger" @click="reject" >不同意</el-button>
        </span>
      </el-dialog>
  </div>
</template>
<style scoped>
* {
  margin: 0;
}

.box-card {
  min-width: 1200px;
  padding-bottom: 20px;
}

.header {
  text-align: center;
}

.content.left-right {
  width: 100%;
  min-width: 1200px;
  margin: auto;
}

.index-style {
  min-width: 1102px;
}

.index-style > .header {
  text-align: center;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

/* 右侧方形图左边区域样式 */

.float-left.text {
  width: 250px;
  padding: 5px 20px;
  font-weight: 500;
}

.text-content {
  width: 400px;
  height: 115px;
  color: #fff;
  border: solid 1px;
  border-radius: 15px;
  margin-top: 10px;
}

.t1 {
  font-size: 16px;
  padding: 0px 5px;
}

.t1 > span {
  margin-left: 20px;
}

.t2 {
  margin-top: 10px;
  font-size: 13px;
  position: absolute;
  width: 310px;
}

.t2 ul {
  padding: 0px 5px;
}
.t2 > ul > section {
  display: inline;
}
li {
  list-style: none;
  display: inline-block;
  width: 100px;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.t2 > ul > section:last-child,
.t2 > ul > li:last-child {
  float: right;
  color: black;
}

.line {
  width: 100%;
  background-color: #fff;
  height: 3px;
}

.url {
  text-align: center;
  margin-top: 5px;
}

.url > a {
  color: #fff;
}

/* 链接样式 */

.url-section {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.bg-style {
  display: inline-block;
  width: 200px;
  margin: auto;
  text-align: center;
  padding: 5px 0px;
}

.bg-blue {
  background: #2e75b6;
}

.bg-gray {
  background: #7f7f7f;
}

.bg-blue > a,
.bg-gray > a {
  color: #fff;
}
</style>

<script>
import * as types from '@/store/types'
export default {
  components: {
    'dialog-index1': () =>
      import(/* webpackChunkName: 'Info' */ '@/components/Fund/outSource/Index/index1'),
    'dialog-index2': () =>
      import(/* webpackChunkName: 'Info' */ '@/components/Fund/outSource/Index/index2')
  },
  data () {
    return {
      activeName: 'dialog-index1',
      currentTabComponent: 'dialog-index1',
      agreeLoading: false,
      showProtocol: false // 是否显示弹框协议
    }
  },
  mounted () {
    if (String(this.$store.state.user.judge) === 'true') {
      this.showProtocol = true
    } else {
      this.showProtocol = false
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
      this.currentTabComponent = tab.name
    },
    closeDialog () {
      this.$store.commit(types.LOGOUT)
      this.$store.commit('DEL_ALL_TAG')
      this.showProtocol = false
      this.$router.replace({
        path: '/login'
      })
    },
    agree: agree,
    reject: reject
  }
}
// 同意补签协议
function agree () {
  if (this.agreeLoading === true) {
    return
  }
  this.agreeLoading = true // 登录中
  this.axios.post('/login/updateProtocolVersion', {
    userName: this.$store.state.user.userName,
    version: this.$store.state.user.version
  }).then(res => {
    if (res.data.status) {
      this.agreeLoading = false
      this.$message({
        type: 'success',
        message: res.data.msg
      })
      this.showProtocol = false
      this.$store.commit('judgeProtocol', false) // 补签成功后把标识设置为false
    } else {
      this.showProtocol = false
      this.$message.error(res.data.msg)
      this.agreeLoading = false
      this.$store.commit(types.LOGOUT)
      this.$store.commit('DEL_ALL_TAG')
      this.showProtocol = false
      this.$router.replace({
        path: '/login'
      })
    }
  }).catch(err => {
    this.agreeLoading = false
    console.log(err)
  })
}
// 不同意补签协议
function reject () {
  this.$store.commit(types.LOGOUT)
  this.$store.commit('DEL_ALL_TAG')
  this.showProtocol = false
  this.$router.replace({
    path: '/login'
  })
}

</script>
